<page-bar></page-bar>

<div class="d-flex justify-content-between align-items-center mb-md">
  <div class="d-flex align-items-center">
    <button *ngIf="auth_btn_add" (click)="startAddG(0)" [disabled]="activedNode || addSwitch" nz-button nzType="default"
      type="button">添加菜单组</button>
    <button *ngIf="auth_btn_add" (click)="startAddG(1)" [disabled]="!activedNode || addSwitch" nz-button
      nzType="default" type="button">添加菜单</button>
    <button *ngIf="auth_btn_edit" (click)="statEdit()" [disabled]="!activedNode || editSwitch" nz-button
      nzType="default" type="button">编辑</button>
    <button *ngIf="auth_btn_del" (click)="delMenu()" [disabled]="!activedNode" nz-button nzType="default"
      type="button">删除</button>
  </div>
</div>

<div nz-row nzGutter="12">
  <div nz-col nzMd="6">
    <nz-input-group [nzSuffix]="suffixIcon">
      <input type="text" nz-input placeholder="Search" [(ngModel)]="searchValue" />
    </nz-input-group>
    <ng-template #suffixIcon>
      <i nz-icon nzType="search"></i>
    </ng-template>
    <div class="treeArea" style="margin-top: 8px; max-height: 600px; overflow: auto; border: 1px solid #ddd">
      <ng-template #iconTpl>
        <img style="width: 64px; height: 41px;" src="./assets/svg/nodata.svg">
      </ng-template>
      <nz-empty class="ant-empty-small" *ngIf="nodes.length === 0" [nzNotFoundImage]="iconTpl"></nz-empty>
      <nz-spin [nzSpinning]="loading">
        <nz-tree #deptTree [nzHideUnMatched]="true" [nzData]="nodes" [nzSearchValue]="searchValue" [nzShowLine]="true"
          [nzDraggable]="false" [nzExpandAll]="true" (nzClick)="nzEvent($event)" (nzExpandChange)="nzEvent($event)"
          (nzSearchValueChange)="nzEvent($event)">
        </nz-tree>
      </nz-spin>
    </div>

  </div>
  <div nz-col nzMd="18">
    <div class="card" style="border: 1px solid #ddd; ">
      <nz-spin [nzSpinning]="loading2">
        <div class="card__bd" style="padding: 12px;">
          <sf #sf [schema]="schema" [button]="null" (formSubmit)="sfSubmit($event)">
            <button *ngIf="editSwitch" type="submit" nzType='primary' nz-button
              [disabled]="!(sf.valid && editSwitch)">更新</button>
            <button *ngIf="editSwitch" type="button" nz-button (click)="closeEdit()">取消</button>

            <button *ngIf="addSwitch" type="submit" nzType='primary' nz-button
              [disabled]="!(sf.valid && addSwitch)">保存</button>
            <button *ngIf="addSwitch" type="button" nz-button (click)="closeAddG()" [disabled]="!addSwitch">取消</button>
          </sf>
        </div>
      </nz-spin>
    </div>
    <nz-card nzTitle="按钮" style="margin-top: 8px;" [nzLoading]="loading3" [nzExtra]="addTemplate">
      <st [size]="'small'" [widthMode]="{ type: 'strict' }" [page]="{front: false}" [data]="authList"
        [columns]="columns">
      </st>
    </nz-card>
    <ng-template #addTemplate>
      <button *ngIf="auth_btn_add" type="button" (click)="addPermission()" nzSize="small" nz-button nzType="default"
        nzShape="circle"><i nz-icon nzType="plus" nzTheme="outline"></i></button>
    </ng-template>
  </div>
</div>
